<template>
    <div class="book">
        <!-- 修正后的导航栏 -->
        <el-row class="nav-bar" type="flex" justify="end">
            <!-- 已移除蓝色用户菜单 -->
        </el-row>

        <el-card class="book_card">
            <el-divider content-position="left">{{book.bookName}}</el-divider>
            <el-row>
                <el-col :span="5">
                    <img :src="book.cover" alt="图片加载出错" class="cover">
                </el-col>
                <el-col :span="19">
                    <div class="information">类型：{{book.type}}</div>
                    <div class="information">作者：{{book.author}}</div>
                    <div class="information">价格：{{book.price}}元</div>
                    <div class="information">库存：32本</div>
                </el-col>
            </el-row>
            <el-card class="description_box">
                <div class="title">
                    内容简介
                </div>
                <div class="description">
                    {{book.description}}
                </div>
            </el-card>
            <el-button type="success" class="shoppingCart" @click="addCart" plain icon="el-icon-shopping-cart-2">加入购物车</el-button>
        </el-card>
    </div>
</template>

<script>
    import { mapState } from "vuex";
    export default {
        name: 'Book',
        computed: {
            ...mapState({
                book: (state) => state.book,
                username: (state) => state.username  // 新增用户信息
            }),
        },
        methods: {
            handleCommand(command) {
                if(command === 'logout') {
                    this.$router.push('/');
                }
            },
            // 移除以下方法
            goBackToHome() {
                console.log('路由实例:', this.$router);
                this.$router.push('/home').catch(err => {
                    console.error('路由跳转失败详情:', err);
                    this.$message.error('路径不存在，请检查路由配置');
                });
            }
        },
        mounted() {
            this.$nextTick(() => {
                document.querySelector('.el-dropdown-menu').style.zIndex = 2000;
            });
        }
    }
</script>

<style scoped>
    /* 新增导航样式 */
    .nav-bar {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        padding: 0 30px;  /* 调整内边距 */
        background: #fff;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        z-index: 999;
        height: 60px;  /* 与header组件统一高度 */
        line-height: 60px;  /* 垂直居中 */
    }
    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
        line-height: 60px;  /* 保持行高一致 */
    }
    .book {
        background-color: #eee;
        display: flex;
        justify-content: center;
    }

    .book_card {
        margin: 100px 0px 30px; /* 增加顶部间距 */
        width: 900px;
    }

    .el-divider__text {
        font-size: 20px;
        font-weight: 600;
    }

    .cover {
        width: 100%;
    }

    .information {
        font-size: 16px;
        padding: 16px 0px;
        padding-left: 25px;
    }

    .description_box {
        margin-top: 30px;
    }

    .description {
        margin-top: 20px;
        font-size: 15px;
        line-height: 30px;
    }

    .title {
        font-size: 20px;
        color: #27ae60;
    }

    .shoppingCart {
        margin: 25px 0px;
        float: right;
    }
</style>